<style>
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        margin-left: 3px;
        float: right;
    }

    .image {
        width: 100%;
        width: 206px;
        height: 206px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .price{
        color: red;
    }
</style>

<template>
    <el-row>
        <el-col :span="2">
            <el-button type="primary" @click="dialogFormVisiable = true">新增门店</el-button>
        </el-col>
        <el-col :span="5">
            <el-input v-model="select_word" placeholder="筛选关键词" ></el-input>
        </el-col>
        <el-col :span="17">
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="4" v-for="(shop,index) in shops" :offset="(index + 1)%5 != 1 ? 1 : 0" style="margin-top:10px;">
            <el-card :body-style="{ padding: '0px' }">
                <img :src="shop.showpath" class="image">
                <div style="padding: 5px;">
                    <span>{{ shop.shopname }}</span>
                    <div class="bottom clearfix">
                        <span class="price">{{ shop.telephone }}</span>
                    </div>
                    <div class="bottom clearfix">
                        {{ shop.address }}
                    </div>
                    <div class="bottom clearfix">
                        <el-button type="text">{{ shop.created_at }}</el-button>
                        <el-button class="button" size="mini" type="danger" icon="el-icon-delete" circle @click="deleteShopById(shop.id)"></el-button>
                        <el-button class="button" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-dialog title="新增门店" :visible.sync="dialogFormVisiable">
            <el-form ref="form"  :rules="rules" :model="form" label-width="80px">
                <el-form-item label="门店名称" prop="shopname">
                    <el-input v-model="form.shopname"></el-input>
                </el-form-item>
                <el-form-item label="门店地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="门店电话" prop="telephone">
                    <el-input v-model="form.telephone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload
                            class="upload-demo"
                            action="https://www.yiliyuan.vip/index.php/api/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="addPathInfo"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                shops:[],
                dialogFormVisiable: false,
                select_word:'',
                form: {
                    shopname: '',
                    address: '',
                    telephone: '',
                    showpath:''
                },
                fileList: [],
                rules:{
                    shopname:[
                        {required: true, message:'门店名不能为空', trigger: 'blur'}
                    ],
                    address:[
                        {required: true, message:'门店地址不能为空', trigger: 'blur'}
                    ],
                    telephone:[
                        {required: true, message:'门店电话不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getShops();
        },
        methods:{
            getShops(){
                this.$axios.get('/shops')
                    .then((res) => {
                        this.shops = res.data.data;
                    })
            },
            onSubmit(formname){
                //提交保存之前先验证数据的合法性
                this.$refs[formname].validate((valid) => {
                    if(valid){
                        //正式提交之前还要验证是否上传了门店的图片信息
                        if(this.form.showpath == ''){//没有上传文件
                            this.$message.error('没有上传门店图片');
                        }else{
                            this.$axios.post('/shops',this.form)
                                .then((res) => {
                                    if(res.data){
                                        this.dialogFormVisiable = false;
                                        this.$message({
                                            message:'新增门店成功',
                                            type: 'success'
                                        });
                                        this.getShops();
                                    }else{
                                        this.$message.error('新增门店失败，请重试');
                                    }
                                })
                        }
                    }else{
                        this.$message.error('提交数据不合法，请修改后重试');
                    }
                })

            },
            deleteShopById(id){
                this.$axios.delete('/shops/'+id)
                    .then((res) => {
                        this.$message({
                            message:'删除成功',
                            type: 'success'
                        });
                        this.getShops();
                    })
            },
            handleRemove(file, fileList){
                console.log(file,fileList);
            },
            handlePreview(file){
                console.log(file);
            },
            addPathInfo(response,file,fileList){
                this.form.showpath = response.data;
            },
            search(){
                this.$axios.get('shops?shopname='+this.select_word)
                    .then((res) => {
                        this.shops = res.data.data;
                    })
            }

        }
    }
</script>
